<template>
  <div class="operateViewPage">
    <!-- 顶部卡片 -->
    <div class="topCardBox">
      <TopCard v-for="(item, index) in topCardList" :key="index" :index="index" :item="item" />
    </div>
    <!-- 主机容量 -->
    <div class="floorBox">
      <!-- <div class="titleBox">
        主机<span>容量</span>
      </div> -->
      <!-- <div class="hostContainer">
        <div class="item" v-for="(item, idx) in chartBarList" :key="idx">
          <div class="title">
            {{ item.title }}
          </div>
          <BarChart :pid="'cbart' + idx" :chart-data="item.data" :styles="{width: '100%', height: '300px'}" :default-props="{label: 'hostName', value: 'utilizationRate'}" :configs="{color: idx === 1 ? 'red' : 'blue', rotate: 35, danwei: '%', xName: '利用率'}" />
        </div>
      </div> -->
      <div class="hostContainer">
        <div class="item">
          <div class="title">
            站点分布
          </div>
          <BarChart pid="modelType" ref="modelType" :chart-data="modelTypeData" :styles="{width: '100%', height: '300px'}" :default-props="{label: 'hostName', value: 'percentage'}" :configs="{color: 'red', rotate: 35, danwei: '%', xName: '占有率'}" />
        </div>
        <div class="item">
          <div class="title">
            任务传输情况
          </div>
          <barchartGroupTrend pid="groupTrend" ref="groupTrend" :chart-data="groupTrendData" :styles="{width: '100%', height: '300px'}" :default-props="{label: 'month', value: 'gpuSize'}" :configs="{color: 'blue', rotate: 35, danwei: '', xName: '传输率'}" />
          <!-- <div ref="groupTrend" style="height: 90%;width: 100%" /> -->
        </div>
        <div class="item">
          <div class="title">
            套餐使用情况
          </div>
          <barcharTuseTrend pid="tuseTrend" ref="tuseTrend" :chart-data="groupTrendData" :styles="{width: '100%', height: '300px'}" :default-props="{label: 'month', value: 'gpuSize'}" :configs="{color: 'blue', rotate: 35, danwei: '', xName: '占有率'}" />
          
          <!-- <barcharTuseTrend  :styles="{width: '100%', height: '300px'}"  :configs="{color: 'blue', rotate: 35, danwei: '', xName: '传输率'}" /> -->
          <!-- <div ref="groupTrend" style="height: 90%;width: 100%" /> -->
        </div>
      </div>
    </div>
    <!-- 算力交易情况 -->
    <div class="floorBox">
      <div class="titleBox">
        资源总览<span>情况</span>
      </div>
      <div class="tradeSituation">
        <div class="cardList">
          <div class="item" v-for="(item, index) in computeOverview" :key="index">
            <span class="label">{{ item.label }}</span>
            <span class="value" :style="{color: color4[index]}">{{ item.value +' '+ item.danwei  }}</span>
            <!-- <div :class="['circleBox']"></div> -->
          </div>
        </div>
        <!-- <div class="topChartBox">
          <div class="item">
            <div class="title">
              各中心算力规模排行
            </div>
            <BarChart pid="bar1" :chart-data="bar1Data" :configs="{ danwei: '', cutXword: '8', rotate: 35, xName: '算力值' }" :styles="{width: '100%', height: '310px'}" :default-props="{ label: 'name', value: 'value' }" />
          </div>
          <div class="item">
            <div class="title">
              各中心GPU利用率排行
            </div>
            <BarChart pid="bar2" :chart-data="bar2Data" :configs="{ danwei: '%', cutXword: '8', rotate: 35, xName: '利用率' }" :styles="{width: '100%', height: '310px'}" :default-props="{ label: 'name', value: 'value' }" />
          </div>
          <div class="item">
            <div class="title">
              训练算力资源利用率
            </div>
            <BarChart pid="bar3" :chart-data="bar3Data" :configs="{ danwei: '%', cutXword: '8', rotate: 35, xName: '利用率' }" :styles="{width: '100%', height: '310px'}" :default-props="{ label: 'name', value: 'value' }" />
          </div>
          <div class="item">
            <div class="title">
              推理算力资源利用率
            </div>
            <BarChart pid="bar4" :chart-data="bar4Data" :configs="{ danwei: '%', cutXword: '8', rotate: 35, xName: '利用率' }" :styles="{width: '100%', height: '310px'}" :default-props="{ label: 'name', value: 'value' }" />
          </div>
        </div> -->
      </div>
    </div>
    <!-- 算力接入总览 -->
    <div class="floorBox">
      <div class="titleBox">
        用户信息<span>总览</span>
      </div>
      <div class="insertOverview">
        <div class="dataCountViews">
          <div class="item">
            <div class="elem" v-for="(item, index) in receiveList1" :key="index">
              <span class="title">{{ item.label }}</span>
              <div class="progressBox color0">
                <span class="proLine" :style="{width: item.disRate + '%'}"></span>
              </div>
              <div class="numberBox">
                <span class="number">{{ item.value }}</span>
                <span class="danwei">{{ item.unit }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="item">
            <div class="elem2" v-for="(item, index) in receiveList2" :key="index">
              <div class="title2" :class="{['recIcon' + index]: true}">
                {{ item.label }}
              </div>
              <div class="numberBox2">
                <span class="number" :style="{color: colors2[index]}">{{ item.value }}</span>
                <span class="danwei">{{ item.unit }}</span>
              </div>
              <div class="progressBox" :class="{['color' + (index + 1)]: true}">
                <span class="proLine" :style="{width: item.disRate + '%'}"></span>
              </div>
            </div>
          </div> -->
        </div>
        <!-- <div class="chartBox">
          <div class="pieBox1">
            <Pie1 pid="pie1" :chart-data="pie1Data" :styles="{width: '100%', height: '210px'}" :configs="{ title: '算力节点数', circle: '算力节点数', danwei: '个' }" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

  <script>
// import Pie1 from '../home/components/pie1.vue'
// import Pie2 from '../home/components/pie2.vue'
import BarChart from './components/barchart.vue'
import barchartGroupTrend from './components/barchartGroupTrend.vue'
import barcharTuseTrend from './components/barcharTuseTrend.vue'

import { lineOptions } from './components/linechart'
// import Bar2 from '../home/components/bar2.vue'
// import { apiGetHomePublic } from '@/api/home.js'
import TopCard from './components/topcard.vue'
// import { getComputeGroupTrend, getComputeUseTrend, getComputeResourceRate, getComputeGPURateRanking, getComputeResourceRanking, getComputeResourceModeltypeRate, getComputePowerOverview, getComputePowerOverviewScheduler, getComputePowerResourceInformation } from '@/api/api_home.js'

export default {
  components: {
    TopCard,
    BarChart,
    barchartGroupTrend,
    barcharTuseTrend
    // Pie1,
    // Pie2,
    // Bar1,
    // Bar2
  },
  data () {
    return {
      topCardList: [
        {
          title: '已接入租户数',
          num: 13,
          unit: '个'
        }, {
          title: '已接入站点数',
          num: 6,
          unit: '个'
        },
        {
          title: '已传输任务数',
          num: 213,
          unit: '个'
        },
        {
          title: '已传输套餐数',
          num: 13,
          unit: '个'
        }, {
          title: '文件列表数',
          num: 78,
          unit: '个'
        },
      ],
      colors1: ['#006b6b', '#F7BA1E', '#30CF7E', '#818FAF', '#0FBDF0'],
      chartBarList: [
        {
          title: '站点分布',
          activeIndex: 'hostmax',
          data: []
        },
        {
          title: '算力增长趋势',
          activeIndex: 'cpumax',
          data: []
        },
        {
          title: '算力使用趋势',
          activeIndex: 'vmmax',
          data: []
        }
      ],
      computeOverview: [
        { label: 'CPU规模', value: '2', danwei: '个' },
        { label: '磁盘规模', value: '40.0', danwei: 'GB' },
        { label: '存储规模', value: '1.92', danwei: 'GB' },
        { label: 'JVM规模', value: '489.5', danwei: 'MB' }
      ],
      receiveList1: [
        { label: '在线数', value: '6', color: '#818FAF' },
        { label: '离线数', value: '2', color: '#0FBDF0' },
        { label: '异常数', value: '4', color: '#30CF7E' }
        // { label: '异常节点数', value: '0', color: '#F7BA1E' }
      ],
      receiveList2: [
        { label: '算力接入数', value: '0', color: '#818FAF' },
        { label: '算力节点数', value: '0', color: '#0FBDF0' },
        { label: '算力可用区数', value: '0', color: '#30CF7E' },
        { label: '异常节点数', value: '0', color: '#F7BA1E' }
      ],
      // 算力节点数
      pie1Data: [],
      pie1DataKeys: {
        superCount: '超算节点',
        generalCount: '通算节点',
        intelligentCount: '智算节点'
      },

      colors2: ['#818FAF', '#0FBDF0', '#30CF7E', '#F7BA1E'],
      // 算力资源统计
      pie2Data: [],
      pie2DataKeys: {
        iotCount: "物联网产品",
        bigDataCount: "大数据产品",
        elasticCount: "弹性计算产品",
        networkCount: "网络产品",
        storageCount: "存储服务产品",
        componentCount: "组件监控产品"
      },
      leftTotalData: [],
      rightTotalData: [],
      centerTotalData: [
        { label: '产品分类', value: 0, key: 'totalCount' },
        { label: '产品总数', value: 0, key: 'categoryCount' },
        { label: '已上架产品数', value: 0, key: 'availableCount' }
      ],
      colors3: ['#F53F3F', '#0FBDF0', '#0FBDF0', '#F7BA1E'],
      imgs1: ['cpu', 'gpu', 'memo', 'disk'],
      imgs2: ['cVm', 'gpuVm', 'metal', 'container', 'workTask', 'disk'],
      // 资源池容量情况
      resourcePoolTable: [],
      resourcePoolTable2: [],
      // 主机容量
      rootDataBar: [],
      // 算力交易情况
      tradeCardList: [],
      color4: ['#006b6b', '#818FAF', '#30CF7E', '#0FBDF0', '#FF7D00'],
      bar1Data: [],
      bar2Data: [],
      bar3Data: [],
      bar4Data: [],
      modelTypeData: [
        { host: "山东" , percentage: 94.52},
        { host: "重庆" , percentage: 0.06 },
        { host: "上海", percentage: 4.12 },
        { host: "其他", percentage: 1.3}
      ],
      groupTrendData: [],
      useTrendData: [],
      groupTrendChart: null,
      groupTrendXArray: [],
      groupTrendYArray: [],
      useTrendChart: null,
      useTrendXArray: [],
      useTrendYArray: []
    }
  },
  mounted () {
    // this.getTopCartData()
    // this.getComputeOverview()
    // this.getReceiveView()
    // this.getModeltypeRate()
    // this.getGroupTrend()
    // this.getUseTrendData()
    // this.getComputeResourceRanking()
    // this.getComputeGPURateRanking()
    // this.getTrainingUseRate()
    // this.getInferenceUseRate()
    // this.getResourceTotalData()
    // this.getResourceContentData()
    // this.getHostContentData()
    // this.getLastFourChart1()
    // this.getLastFourChart2()
    console.log('modelTypeData：', this.modelTypeData)
  },
  methods: {
    // 顶部卡片数据
    getTopCartData () {
      getComputePowerOverviewScheduler().then(res => {
        // const data = JSON.parse(res.moduleValue || '[]')
        if (res.status === 200) {
          this.topCardList = [{ title: '已接入平台数', num: res.data[0].platformCount, unit: '个' }, { title: '集群数', num: res.data[0].clusterCount, unit: '个' }, { title: '节点数', num: res.data[0].nodeCount, unit: '个' }, { title: '推理任务数', num: res.data[0].reTaskCount, unit: '个' }, { title: '训练任务数', num: res.data[0].trTaskCount, unit: '个' }]
        } else {
          this.topCardList = [{ title: '已接入平台数', num: 0, unit: '个' }, { title: '集群数', num: 0, unit: '个' }, { title: '节点数', num: 0, unit: '个' }, { title: '推理任务数', num: 0, unit: '个' }, { title: '训练任务数', num: 0, unit: '个' }]
        }
      })
    },
    // 算力概览
    getComputeOverview () {
      getComputePowerOverview().then(res => {
        // const data = JSON.parse(res.moduleValue || '[]')
        if (res.status === 200) {
          this.computeOverview = [{ label: '算力规模', value: res.data[0].computePowerScale, danwei: 'TFLOPS' }, { label: '网络规模', value: res.data[0].networkScale, danwei: 'Mbps' }, { label: '存储规模', value: res.data[0].storageScale, danwei: 'TB' }, { label: 'GPU规模', value: res.data[0].gpuScale, danwei: '张' }, { label: 'CPU规模', value: res.data[0].cpuScale, danwei: '核' }, { label: '内存规模', value: res.data[0].memoryScale, danwei: 'GB' }]
        } else {
          this.computeOverview = [{ label: '算力规模', value: '0', danwei: 'TFLOPS' }, { label: '网络平均带宽', value: '0', danwei: 'Mbps' }, { label: '存储规模', value: '0', danwei: 'TB' }, { label: 'GPU规模', value: '0', danwei: '张' }, { label: 'CPU规模', value: '0', danwei: '核' }, { label: '内存规模', value: '0', danwei: 'GB' }]
        }
      })
    },
    // 算力资源信息总览
    getReceiveView () {
      getComputePowerResourceInformation().then(res => {
        // const data = JSON.parse(res.moduleValue || '[]')
        if (res.status === 200) {
          this.receiveList1 = [{ label: '算力接入数', value: res.data[0].computerPowerCount, color: '#818FAF' }, { label: '算力节点数', value: res.data[0].computerPowerNodeCount, color: '#0FBDF0' }, { label: '算力可用区数', value: res.data[0].computerPowerZoneCount, color: '#30CF7E' }, { label: '异常节点数', value: res.data[0].errorPowerNodeCount, color: '#F7BA1E' }]
        } else {
          this.receiveList1 = [{ label: '算力接入数', value: '0', color: '#818FAF' }, { label: '算力节点数', value: '0', color: '#0FBDF0' }, { label: '算力可用区数', value: '0', color: '#30CF7E' }, { label: '异常节点数', value: '0', color: '#F7BA1E' }]
        }
      })
      // apiGetHomePublic({
      //   moduleCode: 'ops_access_situation'
      // }).then(res => {
      //   const { viewCmpAccRegion = {}, viewMetricInfo = [] } = JSON.parse(res.moduleValue || '[]')
      //   this.receiveList1 = viewMetricInfo.slice(0, 3)
      //   this.receiveList2 = viewMetricInfo.slice(3, 7)
      //   const arr = []
      //   for (const key in viewCmpAccRegion) {
      //     if (this.pie1DataKeys[key]) {
      //       if (key === 'generalCount') arr[0] = { label: this.pie1DataKeys[key], value: viewCmpAccRegion[key] }
      //       if (key === 'intelligentCount') arr[1] = { label: this.pie1DataKeys[key], value: viewCmpAccRegion[key] }
      //       if (key === 'superCount') arr[2] = { label: this.pie1DataKeys[key], value: viewCmpAccRegion[key] }
      //     }
      //   }
      //   this.pie1Data = arr
      // })
    },
    // 算力型号分布
    getModeltypeRate () {
      getComputeResourceModeltypeRate().then(res => {
        if (res.status === 200) {
          res.data.forEach(item => {
            let params = { hostName: item.name, percentage: parseFloat(item.percentage) }
            this.modelTypeData.push(params)
          })
        }
      })
    },
    // 算力增加趋势
    getGroupTrend () {
      this.groupTrendChart = this.$echarts.init(this.$refs.groupTrend)
      getComputeGroupTrend().then(res => {
        if (res.status === 200) {
          res.data.records.forEach(item => {
            let params = { month: item.month, gpuSize: item.gpuSize }
            this.groupTrendData.push(params)
          })
          this.groupTrendData.sort((a, b) => {
            let dateA = new Date(a.month)
            let dateB = new Date(b.month)
            return dateA - dateB
          })
          this.groupTrendData.forEach(item => {
            this.groupTrendXArray.push(this.formatDateToYearAndMonth(item.month))
            this.groupTrendYArray.push(item.gpuSize)
          })
          this.initGroupTrendCharts()
        }
      })
    },
    initGroupTrendCharts () {
      const groupTrendDatas = [{
        name: "",
        data: this.groupTrendYArray
      }]
      this.groupTrendChart && this.groupTrendChart.setOption(
        lineOptions(
          this.groupTrendXArray,
          groupTrendDatas,
          'GPU',
          "TFLOPS"
        )
      )
    },
    // 算力使用趋势
    getUseTrendData () {
      this.useTrendChart = this.$echarts.init(this.$refs.useTrend)
      getComputeUseTrend().then(res => {
        if (res.status === 200) {
          res.data.records.forEach(item => {
            let params = { month: item.month, gpuUseSize: item.gpuUseSize }
            this.useTrendData.push(params)
          })
          this.useTrendData.sort((a, b) => {
            let dateA = new Date(a.month)
            let dateB = new Date(b.month)
            return dateA - dateB
          })
          this.useTrendData.forEach(item => {
            this.useTrendXArray.push(this.formatDateToYearAndMonth(item.month))
            this.useTrendYArray.push(item.gpuUseSize)
          })
          this.initUseTrendCharts()
        }
      })
    },
    initUseTrendCharts () {
      const useTrendDatas = [{
        name: "",
        data: this.useTrendYArray
      }]
      this.useTrendChart && this.useTrendChart.setOption(
        lineOptions(
          this.useTrendXArray,
          useTrendDatas,
          'GPU',
          "TFLOPS"
        )
      )
    },
    // 各中心算力规模排行
    getComputeResourceRanking () {
      getComputeResourceRanking().then(res => {
        if (res.status === 200) {
          res.data.forEach(item => {
            let params = { name: item.name, value: item.value }
            this.bar1Data.push(params)
          })
        }
      })
    },
    // 各中心GPU利用率排行
    getComputeGPURateRanking () {
      getComputeGPURateRanking().then(res => {
        if (res.status === 200) {
          res.data.forEach(item => {
            let params = { name: item.name, value: (item.value).toFixed(2) }
            this.bar2Data.push(params)
          })
        }
      })
    },
    // 训练算力资源利用率
    getTrainingUseRate () {
      getComputeResourceRate().then(res => {
        if (res.status === 200) {
          this.bar3Data = [{ name: 'CPU', value: (parseFloat(res.data.training.cpuRate === null ? 0 : res.data.training.cpuRate)).toFixed(2) }, { name: 'GPU', value: (parseFloat(res.data.training.gpuRate === null ? 0 : res.data.training.gpuRate)).toFixed(2) }, { name: '内存', value: (parseFloat(res.data.training.memoryRate === null ? 0 : res.data.training.memoryRate)).toFixed(2) }]
          this.bar4Data = [{ name: 'CPU', value: (parseFloat(res.data.inference.cpuRate === null ? 0 : res.data.inference.cpuRate)).toFixed(2) }, { name: 'GPU', value: (parseFloat(res.data.inference.gpuRate === null ? 0 : res.data.inference.gpuRate)).toFixed(2) }, { name: '内存', value: (parseFloat(res.data.inference.memoryRate === null ? 0 : res.data.inference.memoryRate)).toFixed(2) }]
        }
      })
    },
    // 推理算力资源利用率
    getInferenceUseRate () {
      getComputeResourceRate().then(res => {
        if (res.status === 200) {
          this.bar4Data = [{ name: 'CPU', value: parseFloat((res.data.inference.cpuRate)).toFixed(2) }, { name: 'GPU', value: (parseFloat(res.data.inference.gpuRate)).toFixed(2) }, { name: '内存', value: (parseFloat(res.data.inference.memoryRate)).toFixed(2) }]
        }
      })
    },
    // 算力资源统计
    getResourceTotalData () {
      apiGetHomePublic({
        moduleCode: 'ops_res_statistic'
      }).then(res => {
        const { computeMetricUsages = [], viewMetricResourceInfo = [], viewProductDistribution = {} } = JSON.parse(res.moduleValue || '{}')
        this.leftTotalData = computeMetricUsages
        this.rightTotalData = viewMetricResourceInfo
        this.centerTotalData = viewProductDistribution.slice(0, 3)
        this.pie2Data = viewProductDistribution.slice(3).map(item => ({ label: item.name, value: item.count }))
        // for (const key in viewProductDistribution) {
        //   this.centerTotalData.forEach(item => {
        //     if (key === item.key) item.value = viewProductDistribution[key] || 0
        //   })
        //   if (this.pie2DataKeys[key]) this.pie2Data.push({ label: this.pie2DataKeys[key], value: viewProductDistribution[key] })
        // }
      })
    },
    // 资源池容量情况
    getResourceContentData () {
      apiGetHomePublic({
        moduleCode: 'ops_cap_statistic'
      }).then(res => {
        const { customList = [], hostList = [] } = JSON.parse(res.moduleValue || '[]')
        this.resourcePoolTable = hostList.map(item => {
          const cpuRate = (item.cpuUsed / item.cpuTotal * 100).toFixed(2)
          const gpuRate = (item.gpuUsed / item.gpuTotal * 100).toFixed(2)
          const memoRate = (item.memUsed / item.memTotal * 100).toFixed(2)
          return { ...item, cpuRate, gpuRate, memoRate }
        })
        this.resourcePoolTable2 = customList.map(item => {
          const rate1 = (item.normalNum / (item.normalNum + item.abnormalNum) * 100).toFixed(2)
          const rate2 = (item.abnormalNum / (item.normalNum + item.abnormalNum) * 100).toFixed(2)
          return { ...item, rate1, rate2 }
        })
      })
    },
    formatDateToYearAndMonth (dateStr) {
      let dateObj = new Date(dateStr)
      let year = dateObj.getFullYear()
      let month = dateObj.getMonth() + 1
      // 将月份格式化为两位数，例如1月显示为01
      month = month < 10 ? '0' + month : month
      let newDateStr = year + '-' + month
      console.log(newDateStr)
      return newDateStr
    },
    // 主机容量
    getHostContentData () {
      apiGetHomePublic({
        moduleCode: 'ops_vm_capacity'
      }).then(res => {
        const data = JSON.parse(res.moduleValue || '[]')
        this.rootDataBar = data
        this.chartBarList.forEach((item, idx) => {
          this.toggleMaxOrMin(item.activeIndex, idx)
        })
        console.log(data, 13123)
      })
    },
    toggleMaxOrMin (key, idx) {
      const arr = this.rootDataBar.find(item => item.type === key) || []
      this.$set(this.chartBarList[idx], 'activeIndex', key)
      this.$set(this.chartBarList[idx], 'data', arr.hostsUtilization || [])
    },
    // 算力交易情况
    getLastFourChart1 () {
      apiGetHomePublic({
        moduleCode: 'ops_order_num'
      }).then(res => {
        const data = JSON.parse(res.moduleValue || '{}')
        this.tradeCardList = data
      })
    },
    getLastFourChart2 () {
      apiGetHomePublic({
        moduleCode: 'ops_order_top'
      }).then(res => {
        const data = JSON.parse(res.moduleValue || '{}')
        window.console.log(data, 11111)
        for (const key in data) {
          if (key === 'orderList') {
            this.bar1Data = data[key]
          } else if (key === 'dateList') {
            this.bar2Data.date = data[key]
          } else if (key === 'mothRate') {
            this.bar2Data.rate = data[key]
          } else {
            this.bar2Data.datas.push(data[key])
            this.bar2Data.line = data[key]
          }
        }
      })
    }
  }
}
  </script>

  <style lang="scss" scoped>
:deep(.el-table) {
  .el-table__cell {
    text-align: center;
  }
  th.el-table__cell {
    background-color: #f9fafb;
  }
}
.operateViewPage {
  height: 100%;
  overflow-y: auto;
  background-color: #f1f4f8;
  box-sizing: border-box;
  padding: 15px;
  .tradeSituation {
    .cardList {
      display: flex;
      margin-top: 14px;
      .circleBox {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        // &.circle0 {
        //   background: url(../../assets/images/home/circle0.png) no-repeat;
        //   background-size: 100% 100%;
        // }
        // &.circle1 {
        //   background: url(../../assets/images/home/circle1.png) no-repeat;
        //   background-size: 100% 100%;
        // }
        // &.circle2 {
        //   background: url(../../assets/images/home/circle2.png) no-repeat;
        //   background-size: 100% 100%;
        // }
        // &.circle3 {
        //   background: url(../../assets/images/home/circle3.png) no-repeat;
        //   background-size: 100% 100%;
        // }
        // &.circle4 {
        //   background: url(../../assets/images/home/circle4.png) no-repeat;
        //   background-size: 100% 100%;
        // }
      }
      .label {
        font-size: 14px;
        font-weight: bold;
      }
      .value {
        font-size: 22px;
        color: #006b6b;
        margin-top: 12px;
      }
      .item {
        height: 92px;
        flex: 1;
        margin-right: 16px;
        border: 1px solid #dbdee6;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }
      .item:last-child {
        margin-right: 0;
      }
    }
    .topChartBox {
      display: flex;
      margin-top: 16px;
      .item {
        flex: 1;
        border: 1px solid #dbdee6;
        border-radius: 4px;
        height: 375px;
        box-sizing: border-box;
        padding: 16px;
        .title {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 15px;
        }
        .danwei {
          font-size: 14px;
          color: #434c6a;
          margin-top: 15px;
        }
      }
      .item:nth-child(2) {
        margin-left: 16px;
      }
    }
  }
  .hostContainer {
    margin-top: 15px;
    display: flex;
    .tabs {
      position: absolute;
      right: 15px;
      top: 15px;
      display: flex;
      padding: 4px;
      background-color: #f3f4f7;
      border-radius: 2px;
      .elem {
        padding: 4px 10px;
        border-radius: 2px;
        color: #434c6a;
        cursor: pointer;
        &.active {
          background-color: #fff;
          color: #006b6b;
        }
      }
    }
    .item {
      flex: 1;
      margin-right: 15px;
      border: 1px solid #dbdee6;
      border-radius: 4px;
      height: 372px;
      box-sizing: border-box;
      padding: 15px;
      position: relative;
      .title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 24px;
      }
    }
    .item:last-child {
      margin-right: 0;
    }
  }
  .resourcePoolBox {
    display: flex;
    margin-top: 15px;
    .left {
      width: 60%;
      height: 460px;
      margin-right: 15px;
      box-sizing: border-box;
      padding: 15px;
      .topBox {
        display: flex;
        justify-content: space-between;
        .values {
          font-size: 20px;
          display: flex;
          align-items: center;
          i {
            font-size: 16px;
            font-style: normal;
            margin: 0 2px;
          }
          span.color0 {
            color: #30cf7e;
          }
          span.color1 {
            color: #f7ba1e;
          }
          span.color2 {
            color: #f53f3f;
          }
        }
      }
      .progressBox {
        width: 100%;
        height: 12px;
        position: relative;
        margin-top: 4px;
        .proLine {
          position: absolute;
          left: 0;
          top: 0;
          width: 0%;
          height: 100%;
        }
        &.color0 {
          background-color: #e0ecff;
          .proLine {
            background-image: linear-gradient(
              90deg,
              #006b6b14 0%,
              #006b6b7a 100%
            );
          }
        }
      }
    }
    .right {
      width: 40%;
      height: 460px;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .usersList {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        .item {
          display: flex;
          align-items: center;
          background-color: #f9fafb;
          border-radius: 4px;
          margin-top: 15px;
          height: 64px;
          box-sizing: border-box;
          padding: 0 15px;
        }
        .numbers {
          width: 100px;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 14px;
            font-style: normal;
            margin: 0 4px;
          }
          span.color0 {
            color: #30cf7e;
          }
          span.color1 {
            color: #f7ba1e;
          }
        }
        .progressBox2 {
          flex: 1;
          background-color: #f2f2f2;
          height: 12px;
          margin: 0 10px;
          position: relative;
          .line1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            height: 100%;
            background-image: linear-gradient(
              90deg,
              #0fbdf066 0%,
              #0fbdf0 100%,
              #006b6b 100%
            );
            box-shadow: inset -4px 0 0 0 #ffffff;
          }
          .line2 {
            position: absolute;
            left: 0%;
            top: 0;
            width: 0%;
            height: 100%;
            background-image: linear-gradient(
              90deg,
              #f7ba1e66 0%,
              #f7ba1e 100%
            );
          }
        }
        .name {
          width: 80px;
          text-align: center;
        }
        .rank {
          width: 22px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          background-image: linear-gradient(131deg, #8a91a6 0%, #52586d 100%);
          &.top0 {
            background-image: linear-gradient(131deg, #ffc554 0%, #ffa800 100%);
          }
          &.top1 {
            background-image: linear-gradient(131deg, #40e792 0%, #2ec478 100%);
          }
          &.top2 {
            background-image: linear-gradient(131deg, #26a7ff 0%, #006b6b 100%);
          }
        }
      }
      .topTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        .label {
          font-size: 14px;
          font-weight: bold;
        }
        .statusBox {
          .item {
            position: relative;
            margin-left: 30px;
          }
          .item.dot1::after {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #0fbdf0;
          }
          .item.dot2::after {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #f7ba1e;
          }
        }
      }
    }
    & > div {
      border-radius: 4px;
      border: 1px solid #dbdee6;
    }
  }
  .resourceTotalBox {
    display: flex;
    .left {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;
      box-sizing: border-box;
      align-content: flex-start;
      .useProcess {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 18px;
        padding: 0 16px;
        .useProgressBox {
          flex: 1;
          box-sizing: border-box;
          border: 1px solid #dbdee6;
          border-radius: 2px;
          height: 16px;
          margin: 0 10px;
          background-color: #f3f4f7;
          box-shadow: 0 0 0 2px #fff inset;
          position: relative;
          box-sizing: border-box;
          padding: 0 2px;
          .proLine {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 10px;
            background-color: #f7ba1e;
          }
          .cutLine {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 10px;
            background-color: #fff;
          }
          & > div {
            width: 100%;
            position: relative;
            height: 100%;
          }
        }
        .danwei {
          width: 44px;
          color: #f7ba1e;
          font-size: 18px;
          flex-shrink: 0;
          text-align: right;
        }
        .label {
          font-size: 14px;
          color: #434c6a;
          flex-shrink: 0;
        }
      }
      .middle {
        display: flex;
        margin-top: 22px;
        .line::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 32px;
          background-color: #dbdee6;
        }
        .elem {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          box-sizing: border-box;
          position: relative;
        }
        .label {
          color: #434c6a;
          font-size: 14px;
        }
        .value {
          font-size: 22px;
          color: #006b6b;
          margin-top: 16px;
        }
      }
      .top {
        box-sizing: border-box;
        padding: 16px;
        border-bottom: 1px solid #dbdee6;
        display: flex;
        align-items: center;
        height: 64px;
        position: relative;
        .img {
          width: 32px;
          height: 32px;
          background-color: #e0ecff !important;
          border-radius: 2px;
          //   &.cpu {
          //     background: url(../../assets/images/home/cpu.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.disk {
          //     background: url(../../assets/images/home/disk.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.memo {
          //     background: url(../../assets/images/home/memo.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.gpu {
          //     background: url(../../assets/images/home/gpu.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
        }
        .label {
          font-size: 14px;
          font-weight: bold;
          color: #242939;
          margin-left: 15px;
        }
        .danwei {
          position: absolute;
          right: 16px;
          top: 16px;
          width: 24px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          border-radius: 2px;
          background-color: #f3f4f7;
          font-size: 14px;
          color: #959ebc;
        }
      }
      .item {
        border: 1px solid #dbdee6;
        border-radius: 4px;
        box-sizing: border-box;
        width: 48.8%;
        height: 200px;
        margin-right: 2.4%;
        margin-bottom: 15px;
      }
      .item:nth-child(2n) {
        margin-right: 0;
      }
      .item:nth-child(3) {
        margin-bottom: 0;
      }
      .item:nth-child(4) {
        margin-bottom: 0;
      }
    }
    .center {
      width: 506px;
      height: 415px;
      margin: 15px 15px 0;
    }
    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;
      box-sizing: border-box;
      align-content: flex-start;
      .middle {
        display: flex;
        margin-top: 16px;
        .line::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 20px;
          background-color: #dbdee6;
        }
        .elem {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          box-sizing: border-box;
          justify-content: space-between;
          position: relative;
          padding: 0 10px;
        }
        .label {
          color: #434c6a;
          font-size: 14px;
        }
        .value0 {
          font-size: 22px;
          color: #30cf7e;
        }
        .value1 {
          font-size: 22px;
          color: #ff7d00;
        }
      }
      .top {
        box-sizing: border-box;
        padding: 16px 8px;
        border-bottom: 1px solid #dbdee6;
        display: flex;
        align-items: center;
        height: 64px;
        .img {
          width: 32px;
          height: 32px;
          background-color: #e0ecff !important;
          border-radius: 2px;
          //   &.cVm {
          //     background: url(../../assets/images/home/cVm.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.gpuVm {
          //     background: url(../../assets/images/home/gpuVm.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.disk {
          //     background: url(../../assets/images/home/disk.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.metal {
          //     background: url(../../assets/images/home/metal.png) no-repeat center
          //       center;
          //     background-size: 28px 28px;
          //   }
          //   &.workTask {
          //     background: url(../../assets/images/home/workTask.png) no-repeat
          //       center center;
          //     background-size: 28px 28px;
          //   }
          //   &.container {
          //     background: url(../../assets/images/home/container.png) no-repeat
          //       center center;
          //     background-size: 28px 28px;
          //   }
        }
        .label {
          font-size: 14px;
          font-weight: bold;
          color: #242939;
          margin-left: 4px;
        }
        .danweiBox {
          display: flex;
          // flex-direction: column;
          align-items: center;
          flex: 1;
          justify-content: flex-end;
          margin-left: 5px;
          .tNum {
            font-size: 20px;
            color: #006b6b;
            // margin-right: 5px;
          }
          .danwei {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            background-color: #f3f4f7;
            font-size: 14px;
            color: #959ebc;
          }
        }
      }
      .item {
        border: 1px solid #dbdee6;
        border-radius: 4px;
        box-sizing: border-box;
        width: 48.8%;
        height: 128px;
        margin-right: 2.4%;
        margin-bottom: 15px;
      }
      .item:nth-child(2n) {
        margin-right: 0;
      }
      .item:nth-child(5) {
        margin-bottom: 0;
      }
      .item:nth-child(6) {
        margin-bottom: 0;
      }
    }
  }
  .insertOverview {
    display: flex;
    margin-top: 12px;
    .dataCountViews {
      flex: 1;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
        .progressBox {
          width: 100%;
          height: 12px;
          margin-top: 34px;
          position: relative;
          .proLine {
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            height: 100%;
          }
          &.color0 {
            background-color: #e0ecff;
            .proLine {
              background-image: linear-gradient(
                90deg,
                #006b6b14 0%,
                #006b6b7a 100%
              );
            }
          }
          &.color1 {
            background-color: #f0f2f6;
            .proLine {
              background-image: linear-gradient(
                90deg,
                #818faf14 0%,
                #818faf7a 100%
              );
            }
          }
          &.color2 {
            background-color: #e1f4fa;
            .proLine {
              background-image: linear-gradient(
                90deg,
                #0fbdf014 0%,
                #0fbdf07a 100%
              );
            }
          }
          &.color3 {
            background-color: #e5f7ee;
            .proLine {
              background-image: linear-gradient(
                90deg,
                #30cf7e14 0%,
                #30cf7e7a 100%
              );
            }
          }
          &.color4 {
            background-color: #fef7e4;
            .proLine {
              background-image: linear-gradient(
                90deg,
                #f7ba1e14 0%,
                #f7ba1e7a 100%
              );
            }
          }
        }
        .numberBox {
          position: absolute;
          right: 15px;
          top: 15px;
          display: flex;
          align-items: center;
          .danwei {
            padding: 2px 5px;
            border-radius: 2px;
            background-color: #f3f4f7;
            color: #959ebc;
            font-size: 12px;
            margin-left: 8px;
          }
          .number {
            font-weight: 500;
            font-size: 20px;
            color: #006b6b;
          }
        }
        .numberBox2 {
          display: flex;
          align-items: center;
          margin-top: 10px;
          justify-content: space-between;
          .danwei {
            padding: 2px 5px;
            border-radius: 2px;
            background-color: #f3f4f7;
            color: #959ebc;
            font-size: 12px;
            margin-left: 8px;
          }
          .number {
            font-weight: 500;
            font-size: 20px;
            color: #006b6b;
          }
        }
        .title {
          font-weight: 700;
          font-size: 14px;
          color: #242939;
        }
        .title2 {
          font-weight: 700;
          font-size: 14px;
          color: #242939;
          padding-left: 42px;
          height: 32px;
          line-height: 32px;
          //   &.recIcon0 {
          //     background: url(../../assets/images/home/recIcon0.png) no-repeat
          //       left center;
          //     background-size: 32px 32px;
          //   }
          //   &.recIcon1 {
          //     background: url(../../assets/images/home/recIcon1.png) no-repeat
          //       left center;
          //     background-size: 32px 32px;
          //   }
          //   &.recIcon2 {
          //     background: url(../../assets/images/home/recIcon2.png) no-repeat
          //       left center;
          //     background-size: 32px 32px;
          //   }
          //   &.recIcon3 {
          //     background: url(../../assets/images/home/recIcon3.png) no-repeat
          //       left center;
          //     background-size: 32px 32px;
          //   }
        }
        .elem,
        .elem2 {
          flex: 1;
          height: 95px;
          background: #006b6b00;
          border: 1px solid #dbdee6;
          border-radius: 4px;
          margin-right: 15px;
          box-sizing: border-box;
          padding: 15px;
          position: relative;
        }
        .elem2 {
          height: 120px;
          .progressBox {
            margin-top: 10px;
          }
        }
      }
    }
    .pieBox1 {
      border: 1px solid #dbdee6;
      border-radius: 4px;
      width: 385px;
      height: 230px;
      box-sizing: border-box;
      padding: 15px;
      .title {
        font-weight: bold;
        font-size: 14px;
        color: #242939;
        text-align: center;
        margin-bottom: 10px;
      }
    }
    .chartBox {
      display: flex;
    }
  }
  .topCardBox {
    display: flex;
    justify-content: space-between;
    .imgContainer {
      width: 60px;
      height: 60px;
      //   &.bgImg0 {
      //     background: url(../../assets/images/home/topIcon0.png) no-repeat;
      //     background-size: 100% 100%;
      //   }
      //   &.bgImg1 {
      //     background: url(../../assets/images/home/topIcon1.png) no-repeat;
      //     background-size: 100% 100%;
      //   }
      //   &.bgImg2 {
      //     background: url(../../assets/images/home/topIcon2.png) no-repeat;
      //     background-size: 100% 100%;
      //   }
      //   &.bgImg3 {
      //     background: url(../../assets/images/home/topIcon3.png) no-repeat;
      //     background-size: 100% 100%;
      //   }
      //   &.bgImg4 {
      //     background: url(../../assets/images/home/topIcon4.png) no-repeat;
      //     background-size: 100% 100%;
      //   }
    }
    .title {
      font-size: 18px;
      color: #242939;
      font-weight: bold;
      margin-top: 15px;
    }
    .number {
      display: flex;
      align-items: center;
      .danwei {
        font-size: 14px;
        color: #4b5575;
        margin-left: 15px;
      }
      .value {
        font-size: 26px;
        line-height: 33px;
      }
    }
    .item {
      flex: 1;
      margin-right: 16px;
      height: 115px;
      background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 50%);
      border: 1px solid #ffffff;
      box-shadow: 0 4px 8px -4px #24293914;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 12px 20px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .item:last-child {
      margin-right: 0;
    }
  }
  .floorBox {
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 50%);
    border: 1px solid #ffffff;
    box-shadow: 0 4px 8px -4px #24293914;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 16px;
    .titleBox {
      height: 24px;
      line-height: 24px;
      position: relative;
      box-sizing: border-box;
      padding-left: 8px;
      color: #242939;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      & > span {
        color: #006b6b;
      }
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: #006b6b;
        border-radius: 2px;
        border-radius: 1.5px;
      }
    }
  }
  .pieBox2 {
    height: 100%;
    border: 1px solid #dbdee6;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 16px;
    .title {
      font-size: 14px;
      font-weight: bold;
      text-align: center;
    }
    .cardList {
      display: flex;
      margin-top: 15px;
      margin-bottom: 15px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f9fafb;
        border-radius: 2px;
        flex: 1;
        height: 66px;
        margin-right: 15px;
        &:last-child {
          margin-right: 0;
        }
      }
      .value {
        font-size: 22px;
        color: #006b6b;
        margin-top: 8px;
      }
      .label {
        font-size: 14px;
        font-weight: bold;
        color: #242939;
      }
    }
  }
}
</style>
